<template>
    <el-table v-loading="tableLoading"
              :data="tableData"
              element-loading-background="rgba(122, 122, 122, 0.3)"
              element-loading-text="加载中..."
              style="width: 100%">

<#if geneTable.columns??>
        <#list geneTable.columns as column>
        <el-table-column label="${column.columnComment}" prop="${column.columnNameCamel}"/>
        </#list>
    </#if>

        <el-table-column label="操作">
            <template #default="scope">
                <el-button size="small" type="primary" @click="handleTableUpdateBtnClick(scope.row)">
                    修改
                </el-button>

                <el-popconfirm title="你确定要删除么?" @confirm="handleTableDelBtnConfirm(scope.row)">
                    <template #reference>
                        <el-button size="small" :loading="tableDelBtnLoading === scope.row.Id" type="danger">
                            删除
                        </el-button>
                    </template>
                </el-popconfirm>
            </template>
        </el-table-column>
    </el-table>

    <el-pagination
            v-model:current-page="pageInfo.pageNum"
            v-model:page-size="pageInfo.pageSize"
            :background="true"
            :page-sizes="[5, 10, 15, 20]"
            :total="pageInfo.total"
            layout="total, prev, pager, next, jumper, sizes"
            style="margin-top: 20px;"
    />
</template>


<script setup>
import {ref} from 'vue'

// 表格加载
const tableLoading = ref(false)

// 表格删除按钮加载
const tableDelBtnLoading = ref(false)

// 表格列表数据
const tableData = ref([])

// 表格行的删除按钮事件
const handleTableDelBtnConfirm = row => {

}

// 表格行的修改按钮事件
const handleTableUpdateBtnClick = row => {

}
</script>

<style lang="less" scoped>

</style>

<style lang="less">

</style>
